<template>
  <div
    v-loading="loadMusic"
    element-loading-text="音乐数据加载中"
    element-loading-spinner="el-icon-loading"
  >
    <el-form ref="searchForm" :inline="true" :model="page" style="margin-top: 20px;">
      <el-form-item label="歌曲名">
        <el-input v-model="page.params.name" clearable placeholder="歌曲名" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="page.params.enabled" placeholder="是否启用" clearable filterable @clear="clearSelect">
          <el-option label="启用" :value="1" />
          <el-option label="未启用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="歌手">
        <el-input v-model="page.params.artist" clearable placeholder="歌手" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <el-button type="primary" size="mini" class="addBtn" @click="handlerAddMusic">添加歌曲</el-button>
    <el-button type="primary" size="mini" class="addBtn" @click="stopHear">停止试听</el-button>
    <el-table
      v-loading="loading"
      :data="page.list"
      border
      style="width: 100%"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      @sort-change="handlerSortChange"
      @selection-change="handlerSelectionChange"
    >
      <el-table-column prop="id" label="音乐ID" width="100" />
      <el-table-column prop="name" label="音乐名称" />
      <el-table-column prop="artist" label="歌手" />
      <el-table-column label="封面">
        <template slot-scope="scope">
          <el-image
            style="width: 100px;min-height: 60px"
            :src="scope.row.cover"
            :preview-src-list="[scope.row.cover]"
          >
            <div
              slot="placeholder"
              v-loading="true"
              element-loading-text="图片加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="#fff"
              class="image-slot"
              style="height: 60px;width: 100%"
            />
            <div slot="error" class="image-slot" style="width:100px;height:60px;line-height:60px;background-color: #e2e2e2">
              load failed
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.enabled===1" type="success">启用</el-tag>
          <el-tag v-else type="warning">弃用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button size="mini" type="primary">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-row>
                <el-col :span="12">
                  <el-dropdown-item>
                    <el-button size="mini" type="danger" @click="handlerDelete(scope.row.id)">删除</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="success" @click="handlerEnable(scope.row.id)">启用</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="warning" @click="handlerDisable(scope.row.id)">弃用</el-button>
                  </el-dropdown-item>
                </el-col>
                <el-col :span="12">
                  <el-dropdown-item>
                    <el-button size="mini" type="primary" @click="toHear(scope.row.id)">试听</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="primary" @click="roReadLrc(scope.row.id)">歌词</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button size="mini" type="primary" @click="handlerEdit(scope.row.id)">更新</el-button>
                  </el-dropdown-item>
                </el-col>
              </el-row>

            </el-dropdown-menu>
          </el-dropdown>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.countTotal"
      class="pagination-bottom"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--添加歌曲-->
    <el-dialog
      v-if="musicAddDialog"
      title="添加歌曲"
      :visible.sync="musicAddDialog"
      width="50%"
    >
      <music-add @getMusicList="getMusicList" @closeMusicAddDialog="closeMusicAddDialog" />
    </el-dialog>
    <!--更新歌曲-->
    <el-dialog
      v-if="musicUpdateDialog"
      title="更新歌曲"
      :visible.sync="musicUpdateDialog"
      width="50%"
    >
      <music-update :music="music" @getMusicList="getMusicList" @closeMusicUpdateDialog="closeMusicUpdateDialog" />
    </el-dialog>
    <!--读歌词-->
    <el-dialog
      v-if="readLrcVisible"
      title="显示歌词"
      :visible.sync="readLrcVisible"
      width="50%"
    >
      <div v-html="lrc" />
    </el-dialog>
    <audio ref="audio" :src="musicUrl" loop="loop" controls="controls" style="display: none">
      your browser is not support audio
    </audio>
  </div>
</template>

<script>
import musicApi from '@/api/music'
import musicAdd from './music-add'
import musicUpdate from './music-update'
export default {
  name: 'MusicList',
  components: {
    musicAdd,
    musicUpdate
  },
  data() {
    return {
      // 数据列表
      drawer: false,
      loading: true,
      page: {
        currentPage: 0, // 当前页
        pageSize: 10, // 页面大小
        pageTotal: 0, // 总页数
        countTotal: 0, // 总条数
        sortColumn: '', // 排序字段
        sortMethod: 'asc', // 排序方法
        list: [], // 数据
        params: {} // 条件查询参数
      },
      music: {},
      multipleSelection: [],
      musicAddDialog: false, // 添加音乐弹框
      musicUpdateDialog: false, // 更新
      readLrcVisible: false, // 读歌词
      lrc: '',
      musicUrl: '',
      loadMusic: false
    }
  },
  watch: {
    'lrc': function(newVal, oldVal) {
      this.music.lrc = newVal
    }
  },
  created() {
    this.getMusicList()
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getMusicList()
    },

    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getMusicList()
    },
    // 多选框事件
    handlerSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(res => {
        this.multipleSelection.push(res.MusicId)
      })
    },
    // 启用
    handlerEnable(id) {
      this.$confirm('此操作将启用该歌曲, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        musicApi.enableById(id).then(res => {
          this.$message.success(res.msg)
          musicApi.getByPage(this.page).then(res => {
            if (res.code === 200) {
              this.page = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      })
    },
    // 试听
    toHear(id) {
      this.loadMusic = true

      musicApi.get(id).then(res => {
        if (res.code === 200) {
          this.musicUrl = res.data.url
          const that = this
          setTimeout(function() {
            that.$refs.audio.play()
            if (res.data.url.substring(0, 7) === 'http://') {
              that.$message.success('开始播放，但是部分浏览器加载比较缓慢，firefox正常运行')
            } else {
              that.$message.error('没有音频文件')
            }
          }, 300)
          this.loadMusic = false
        } else {
          this.$message.error(res.msg)
          this.loadMusic = false
        }
      }).catch(() => {
        this.loadMusic = false
      })
    },
    // 读歌词
    roReadLrc(id) {
      this.readLrcVisible = true
      musicApi.get(id).then(res => {
        if (res.code === 200) {
          this.lrc = res.data.lrc
        }
      })
    },
    // 停止试听
    stopHear() {
      if (this.musicUrl === '') {
        this.$message.error('当前没有正在播放的音乐')
      } else {
        this.$refs.audio.pause()
        this.musicUrl = ''
      }
    },
    handlerDisable(id) {
      this.$confirm('此操作将弃用该歌曲, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        musicApi.disableById(id).then(res => {
          this.$message.success(res.msg)
          musicApi.getByPage(this.page).then(res => {
            if (res.code === 200) {
              this.page = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      })
    },
    // 处理分类
    handlerSortChange(e) {
      this.page.sortMethod = e.order
      this.page.sortColumn = e.prop
      this.getMusicList()
    },
    getMusicList() {
      this.loading = true
      musicApi.getByPage(this.page).then(res => {
        if (res.code === 200) {
          this.page = res.data
          this.loading = false
        } else {
          this.$message.error(res.msg)
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 查询
    onSubmit() {
      this.getMusicList()
    },
    clearSelect() {
      delete this.page.params.enabled
    },
    // 添加歌曲
    handlerAddMusic() {
      this.musicAddDialog = true
    },
    handlerEdit(id) {
      this.musicUpdateDialog = true
      musicApi.get(id).then(res => {
        if (res.code === 200) {
          this.music = res.data
          this.$message.success('成功加载信息')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handlerDelete(id) {
      this.$confirm('此操作将删除该歌曲, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        musicApi.deleteById(id).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          }
          musicApi.getByPage(this.page).then(res => {
            if (res.code === 200) {
              this.page = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
        })
      })
    },
    closeMusicAddDialog() {
      this.musicAddDialog = false
    },
    closeMusicUpdateDialog() {
      this.musicUpdateDialog = false
    }
  }
}
</script>
<style scoped lang="scss">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .sp{
    font-size: 15px;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
